<template>
	<view class="pages">
		<view class="bg">
			<view class="title">他说</view>
			<view class="userInfoWrap">
				<view class="left_warp" @click="messagebtn">
					<image class="avatar" mode="aspectFill" :src="userInfo.avatar != null ?   userInfo.avatar : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'"/>
					<view class="userInfo">
						<view class="name">{{ userInfo.realname }}</view>
						<view class="hotWrap">
							<image class="hot" :src="getImgUrl('/img/allImgs/forum/hot.svg')" />热度：{{hotCount}}
						</view>
					</view>
				</view>
				<view class="right_jl" @click="Sigin">
				 <image :src="tabis" mode="" class="jl_img" ></image>签到奖励
				</view>
			</view>
			<view class="bgSyl">
				<image style="width: 100%; height: 100%;position: absolute;z-index: 11;" :src="getImgUrl('/img/allImgs/rzimg/beijing.svg')" mode="aspectFit|aspectFill|widthFix" />
				<image class="fontSyl" :src="getImgUrl('/img/allImgs/rzimg/1.svg')" mode="aspectFit|aspectFill|widthFix" />
				<view class="fontDetail">入驻他说app让咨询更权威</view>
				<view class="confirm" @click="goConfirm">去认证</view>
			</view>
			<!-- <view class="Num">
				<view class="Numfirst">
					<view>2640</view>
					<view>2640</view>
					<view>2640</view>
					<view>2640</view>
				</view>
				<view class="NumTwo">
					<view>金币</view>
					<view>关注</view>
					<view>粉丝</view>
					<view>优惠卷</view>
				</view>
			</view> -->
			<view class="tab_gn">
				<view class="gongneng">常用功能</view>
				<view class="tabsWrap">
					<view class="tabs" v-for="(item,idx) in tabsList" :key="idx" @click="changeUrl('',item.url)" :style="{margin: item.show ? '0 50rpx' :'0'}">
						<image v-show="item.show" :src="item.img" />
						<view v-show="item.show" class="name">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="navWrap">
				<view class="navsInfo" v-for="(item,idx) in navList" :key="idx" @tap='changeUrl(item.type,item.url)'>
					<view class="content">
						<image class="navImg" :src="item.img" />
						<view class="name" style="font-size: 28rpx; color:#222229;">{{ item.name }}</view>
					</view>
					<image class="arrow" :src="getImgUrl('/img/allImgs/my/arrow.svg')" />
				</view>
			</view>
			<view style="width: 100%; height: 40rpx;"></view>
		</view>

		<uni-popup ref="alertDialog" type="dialog" style="z-index: 1000000;position: absolute">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="通知" content="确定退出登录吗?"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>



		<!-- 底部tab -->
		<!-- flag等于几取决于组件页面的id -->
		<tablebox class="flex:none" flag="5"></tablebox>
	</view>
</template>
<script>
	import tablebox from '../../../components/tabBox.vue';
	import {
		baseURL
	} from '../../../utils/baseUrl';
	import {
		imgBaseUrl
	} from '../../../utils/baseUrl'
	import { getUserPostReadCount } from '../../../utils/api.js'
	import {queryByIdExpertManagement} from '../../../utils/OnetoOneaApi.js'
	import { showInfoFunc } from '../../../utils/common';
	import { getImgUrl } from '../../../utils/common'
	
	export default {
		components: {
			tablebox,
		},
		data() {
			return {
				url: '',
				hotCount:'',
				userInfo:'',
				baseURL,
				flag:true,
				tabis:imgBaseUrl + '/img/wshing/tab.png',
				tabsList: [{
						name: '我的他币',
						img: imgBaseUrl + '/img/wshing/tabi.png',
						url: '../../../subPackagesB/pages/Mytabi/Mytabi',
						show: true
					},
					{
						name: '起名记录',
						img: imgBaseUrl + '/img/allImgs/my/tab2.svg',
						url: '../../../subPackagesB/pages/Namerecod/Namerecod',
						show: false
					},
					{
						name: '我的档案',
						img: imgBaseUrl + '/img/wshing/dangan.png',
						url: '../../../subPackagesA/pages/cardList/cardList',
						show: true,
					}, {
						name: '测字记录',
						img: imgBaseUrl + '/img/wshing/cezi.png',
						url: '../../../subPackagesB/pages/Glyphomancy/Glyphomancy',
						show: false
					}, 
					// {
					// 	name: '我的卡券',
					// 	img: imgBaseUrl + '/img/wshing/kaquan.png',
					// 	url: '../../../subPackagesB/pages/mycard/mycard'
					// }, {
					// 	name: '浏览记录',
					// 	img: imgBaseUrl + '/img/allImgs/my/tab3.svg',
					// 	url: '../../../subPackagesB/pages/browhistory/browhistory'
					// }, 
					{
						name: '我的帖子',
						img: imgBaseUrl + '/img/allImgs/my/tab1.svg',
						url: '../../../subPackagesB/pages/mypost/mypost',
						show: true,
					},
					// {
					// 	name: '草稿箱',
					// 	img: imgBaseUrl + '/img/allImgs/my/tab4.svg',
					// 	url: '../../../subPackagesB/pages/Drafts/Drafts'
					// },
					{
						name: '咨询订单',
						img: imgBaseUrl + '/img/wshing/tuijian.png',
						url: '../../../subPackagesB/pages/MyOrder/orderList',
						show: true,
					}
				],
				navList: [
				// 	{
				// 	name: '订单列表',
				// 	img: imgBaseUrl + '/img/allImgs/my/nav1.svg',
				// 	url: '../../../subPackagesA/pages/orderList/orderList'
				// },
				{
					name: '意见反馈',
					img: imgBaseUrl + '/img/allImgs/my/nav1.svg',
					url: '../../../subPackagesA/pages/feedback/feedback'
				}, {
					name: '隐私协议',
					img: imgBaseUrl + '/img/allImgs/my/nav2.svg',
					url: '../../../subPackagesB/pages/Myyinsi/Myyinsi'
				}, {
					name: '用户协议',
					img: imgBaseUrl + '/img/allImgs/my/nav3.svg',
					url: '../../../subPackagesB/pages/Agreement/Agreement'
				}, {
					name: '关于我们',
					img: imgBaseUrl + '/img/allImgs/my/nav4.svg',
					url: '../../../subPackagesB/pages/About/About'
				},
				// {
				// 	name: '设置中心',
				// 	img: imgBaseUrl + '/img/allImgs/my/nav5.svg',
				// 	url: ''
				// },
				{
					name: '退出登录',
					type: 'logout',
					img: imgBaseUrl + '/img/allImgs/my/nav5.svg',
					url: '/pages/tabbar/login/login'
				}]
			}
		},
		onLoad(){
			const name = showInfoFunc("起名记录")
			const testFont = showInfoFunc("测字记录")
			console.log(testFont,name);
			
			this.tabsList[3].show = testFont == undefined ? false : true
			this.tabsList[1].show = name == undefined ? false : true
		},
		onShow(){
			let userInfo = wx.getStorageSync('userInfo')
			this.userInfo = userInfo
			this.getHotCount();
			
		},
		methods: {
			getImgUrl,
			async goConfirm(){
				let _this = this
				if(this.flag){
					this.flag = false
					// 获取专家审核状态
					const status = await queryByIdExpertManagement(this.userInfo.id)
					if(status.code == 200){
						const zjstatus = status.result?.auditStatus
						uni.navigateTo({
							url:`../../../subPackagesA/pages/approve/approve?status=${zjstatus}`,
						})
						// if(zjstatus != '0'){
						// 	uni.navigateTo({
						// 		url:`../../../subPackagesA/pages/approve/approve?status=${zjstatus}`,
						// 	})
						// }else{
						// 	uni.navigateTo({
						// 		url:'../../../subPackagesA/pages/settleIn/settleIn',
						// 	})
						// }
					}
					setTimeout(() => {
						_this.flag = true
					}, 3000);
				}
				
				
			},
			async getHotCount(){
				const res = await getUserPostReadCount(this.userInfo.id)
				this.hotCount = res.result
			},
			changeUrl(type, url) {
				if (type == 'logout') {
					this.$refs.alertDialog.open()
					this.url = url

				} else {
					uni.navigateTo({
						url
					})
				}

			},

			dialogConfirm() {
				// try {
				// 	uni.closeSocket();
				// } catch (error) {
				// 	console.log("socket关闭异常：",error)
				// }		
				uni.clearStorageSync();
				uni.reLaunch({
					url: this.url
				})
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			//签到奖励
			Sigin(){
				uni.navigateTo({
					url:'../../../subPackagesB/pages/reward/reward'
				})
			},
			//跳到我的档案
			messagebtn(){
				let userid = this.userInfo.id
				uni.navigateTo({
					url:`../../../subPackagesA/pages/addRecord/addRecord?userid=${userid}`
				})
			}
		}
	};
</script>
<style scoped lang="less">
.bgSyl{
	margin: 30rpx;
	height: 140rpx;
	position: relative;
	.fontSyl{
		position: absolute;
		top: 18rpx;
		left: 60rpx;
		z-index: 99999;
		width: 130rpx;
		height: 60rpx;
	}
	.fontDetail{
		position: absolute;
		left: 60rpx;
		color: #fff;
		top: 74rpx;
		z-index: 999;
		font-size: 24rpx;
	}
	.confirm{
		width: 158rpx;
		height: 58rpx;
		line-height: 58rpx;
		background: #FFFFFF;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		opacity: 1;
		color: #FF7F22;
		font-size: 30rpx;
		position: absolute;
		right: 30rpx;
		z-index: 99999;
		top: 40rpx;
		text-align: center;
	}
}
	.navWrap {
		margin: 0 auto 120rpx auto;
		padding: 0 30rpx;
		width: 626rpx;
		position: relative;
		z-index: 999999;
		// height: 620rpx;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: inset 0rpx 2rpx 4rpx 0rpx #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.navsInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 110rpx;

			.content {
				display: flex;
				align-items: center;
			}

			.navImg {
				width: 45rpx;
				height: 45rpx;
			}

			.arrow {
				width: 12rpx;
				height: 20rpx;
			}
		}
	}

	.tab_gn {
		position: relative;

		.gongneng {
			position: absolute;
			left: 102rpx;
			top: 15rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #222229;
		}
	}

	.tabsWrap {
		margin: 40rpx auto;
		padding: 30rpx;
		padding-top: 70rpx;
		width: 626rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		// flex-direction: column;

		.tabs {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 50rpx;

			.name {
				text-align: center;
				width: 104rpx;
				height: 36rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #222229;
			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.title {
		text-align: center;
		padding-top: 60rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #141419;
	}

	.userInfoWrap {
		margin-left: 30rpx;
		padding: 50rpx 37rpx 0 0;
		display: flex;
		padding-bottom: 38rpx;
		display: flex;
		justify-content: space-between;
		.left_warp{
			display: flex;
			.userInfo {
				margin-left: 20rpx;
				.name {
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #222229;
				}
			}
			
			.hotWrap {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			
				.hot {
					width: 36rpx;
					height: 36rpx;
				}
			}
			
			.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}
		}
		.right_jl{
			width: 168rpx;
			height: 56rpx;
			background: rgba(255,255,255,0.6);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			opacity: 1;
			border: 2rpx solid #F9F3E8;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			// font-weight: 500;
			color: #DC9E66;
			line-height: 56rpx;
			.jl_img{
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}
		}

	}

	.bg {
		width: 100%;
		height: 40vh;
		background: linear-gradient(180deg, #F7E0BC 26%, #F5F5F7 85%);
		// background: url(https://ctrlsoft.net.cn/app_static/hesaid/img/forum/bg.svg);
	}

	.test {
		float: left;
	}

	.Num {
		padding-left: 88rpx;
		padding-right: 88rpx;

		.Numfirst {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			display: flex;
			justify-content: space-between;
		}

		.NumTwo {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			display: flex;
			justify-content: space-between;
		}
	}
</style>

<style>
page{
	background-color: #F5F5F7;
}
</style>